<template>
	<el-main>
		<el-card shadow="never">
			<scFilterBar
				filterName="filterName"
				:options="options"
				@filterChange="change"
			></scFilterBar>
		</el-card>
		<el-alert
			title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,在@/config/filterBar.js中可以更改运算符以及其他配置,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适"
			type="success"
			style="margin: 20px 0"
		></el-alert>
		<el-card shadow="never">
			<pre>{{ filterData }}</pre>
		</el-card>
	</el-main>
</template>

<script>
import scFilterBar from "@/components/scFilterBar";

export default {
	name: "filterBar",
	components: {
		scFilterBar,
	},
	data() {
		return {
			filterData: {},
			defaultFilter: [],
			options: [
				{
					label: "订单号",
					value: "id",
					type: "text",
					selected: true,
					placeholder: "请输入订单号",
				},
				{
					label: "类型",
					value: "type",
					type: "select",
					operator: "=",
					selected: true,
					placeholder: "请选择类型",
					extend: {
						data: [
							{
								label: "选项1",
								value: "1",
							},
							{
								label: "选项2",
								value: "2",
							},
						],
					},
				},
				{
					label: "类型(多选)",
					value: "type2",
					type: "select",
					operator: "=",
					placeholder: "请选择类型",
					extend: {
						multiple: true,
						data: [
							{
								label: "选项1",
								value: "1",
							},
							{
								label: "选项2",
								value: "2",
							},
						],
					},
				},
				{
					label: "通知(异步)",
					value: "noticeType",
					type: "select",
					operator: "=",
					placeholder: "请选择通知类型",
					extend: {
						request: async () => {
							var list = await this.$API.system.dic.get.get();
							return list.data.map((item) => {
								return {
									label: item.label,
									value: item.value,
								};
							});
						},
					},
				},
				{
					label: "通知(远程搜索)",
					value: "noticeType2",
					type: "select",
					operator: "=",
					placeholder: "请输入关键词后检索",
					extend: {
						remote: true,
						request: async (query) => {
							var data = {
								keyword: query,
							};
							var list = await this.$API.system.dic.get.get(data);
							return list.data.map((item) => {
								return {
									label: item.label,
									value: item.value,
								};
							});
						},
					},
				},
				{
					label: "开关",
					value: "switch",
					type: "switch",
					operator: "=",
				},
				{
					label: "日期单选",
					value: "date",
					type: "date",
				},
				{
					label: "日期范围",
					value: "date2",
					type: "daterange",
				},
			],
		};
	},
	methods: {
		change(data) {
			this.filterData = data;
		},
	},
};
</script>

<style></style>
